import { Table, Space, Input, Button, Image } from 'antd'
import { useRef, useCallback, useState } from 'react'
import * as XLSX from 'xlsx'
const Com = () => {
    const [proList, setProList] = useState([])
    const fileRef = useRef()
    const selectExcel = useCallback(() => {
        fileRef.current.input.click()
    }, [])
    const columns = [
        {
            title: '序号',
            render: (text, record, index) => {
                return <span>{index + 1}</span>
            }
        },
        {
            title: '产品名称',
            dataIndex: 'proname'
        },
        {
            title: '图片',
            dataIndex: 'img1',
            render(text, record, index) {
                return (
                    <Image src={text} style={{ width: 80, height: 80 }} />
                )
            }
        },
        {
            title: '价格',
            dataIndex: 'originprice'
        }
    ]
    const uploadFile = () => {
        const file = fileRef.current.input.files[0]
        const reader = new FileReader()
        reader.readAsBinaryString(file)
        reader.onload = function () {
            const workbook = XLSX.read(this.result, { type: 'binary' })
            const t = workbook.Sheets['工作表1']
            const r = XLSX.utils.sheet_to_json(t)
            setProList(r)
        }
    }
    return (
        <Space direction="vertical" style={{ width: '100%' }}>
            <Button type="primary" onClick={selectExcel}>导入数据</Button>
            <Input ref={fileRef} hidden type="file" onChange={uploadFile} />
            <Table
                dataSource={proList}
                columns={columns}
                rowKey="proname"
            >

            </Table>
        </Space>
    )
}

export default Com